<template>
  <PageTitle title="AI 图片生成器" />
  <div class="container">
    
    <div class="input-group">
      <textarea 
        v-model="prompt" 
        placeholder="请输入图片描述..."
        class="prompt-input"
      ></textarea>
      
      <div class="controls">
        <label>
          生成数量:
          <input 
            type="number" 
            v-model="n" 
            min="1" 
            max="10"
            class="number-input"
          >
        </label>
        
        <button 
          @click="send" 
          class="submit-btn"
          :disabled="isLoading"
        >
          {{ isLoading ? '生成中...' : '开始生成' }}
        </button>
        <button id='save' @click="save" :disabled="isLoading" v-if="img.length > 0">
      <span v-if="!isLoading">保存</span>
      <span v-else class="loader"></span>
    </button>
      </div>
    </div>
    
    <div v-if="isLoading" class="loading">
      <img src="/public/lodin.gif" alt="加载中">
      <p>正在生成图片，请稍候...</p>
    </div>
    
    <div v-if="task_id" class="task-info">
      <p>任务ID: {{ task_id }}</p>
    </div>
    
    <div v-if="img.length > 0" class="gallery">
      <h3>生成结果</h3>
      <div class="images">
        <img 
          v-for="(u, index) in img" 
          :key="index" 
          :src="u" 
          class="generated-image"
        >
      </div>
    </div>
    <div>
        <h2>历史图片</h2>
        <div v-for="item in his_img" :key="item">
            <div v-html="item[0]"></div>
            <div class = "images">
              <img v-for="(u,index) in item[1]"
               :key="index"
               :src="u" 
               class="generated-image"
              >
            </div>
            <hr>
        </div>
    </div>
  </div>
</template>

<style scoped>
.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  font-family: 'Arial', sans-serif;
}

h2 {
  color: #333;
  text-align: center;
  margin-bottom: 30px;
}

.input-group {
  margin-bottom: 30px;
}

.prompt-input {
  width: 100%;
  min-height: 120px;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 16px;
  margin-bottom: 15px;
  resize: vertical;
}

.controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.number-input {
  width: 60px;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-left: 10px;
}

.submit-btn {
  background-color: #4CAF50;
  color: white;
  border: none;
  padding: 12px 25px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s;
}

.submit-btn:hover {
  background-color: #45a049;
}

.submit-btn:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}

.loading {
  text-align: center;
  margin: 30px 0;
}

.loading p {
  margin-top: 10px;
  color: #666;
}

.task-info {
  margin: 20px 0;
  padding: 10px;
  background-color: #f5f5f5;
  border-radius: 4px;
}

.gallery {
  margin-top: 40px;
}

.gallery h3 {
  margin-bottom: 20px;
  color: #333;
}

.images {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.generated-image {
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  transition: transform 0.3s;
}

.generated-image:hover {
  transform: scale(1.02);
}
</style>
<script setup>
import { ref,computed } from 'vue'
import axios from '../AI-axios/index';
import PageTitle from '@/AI-components/PageTitle.vue';
import { useinfoStore } from '@/AI-Stores/info'
const infoStore = useinfoStore()

const prompt = ref("")
const task_id = ref('')
const n = ref(0)
let timer = null
const img = ref([]) 
const isLoading = ref(false)
const his_img = computed(()=>{
    return infoStore.his_img
})
const save = ()=>{
    infoStore.save([prompt.value,img.value],'imgCreate')
}
const send = () => {
    isLoading.value = true
    axios.post("/aa/api/v1/services/aigc/text2image/image-synthesis", {
        "model": "wanx2.1-t2i-turbo",
        "input": {
            "prompt": prompt.value
        },
        "parameters": {
            "size": "1024*1024",
            "n": n.value
        }
    },
        {
            headers: {
                'X-DashScope-Async': 'enable'
            }
        })
        .then(res => {
            console.log(res.data)
            task_id.value = res.data.output.task_id
            timer = window.setInterval(()=>{
                console.log(timer);
                
                ask_img(task_id.value)
            },10000)
        })
        .catch(err => {
            console.log(err)
        })
}
const ask_img = (id)=>{
    axios.get(`/aa/api/v1/tasks/${id}`,{
    }).then(res=>{
        console.log(res.data)
        if(res.data.output.task_status=="FAILED"){
            window.clearInterval(timer)
            alert("任务失败")
            isLoading.value = false
            return
            
        }else if(res.data.output.task_status=="SUCCEEDED"){
            let res_img = res.data.output.results
            for( let i=0 ;i<res_img.length;i++){
                
                // console.log(res_img[i].image)
                img.value.push(res_img[i].url)
            }
            infoStore.addImgNum(res_img.length)
            window.clearInterval(timer)
            isLoading.value = false
        }
    }).catch(err=>{
        console.log(err)
    })
}

</script>
<style scoped></style>